.chat {
  @apply grid grid-cols-2 gap-x-4 py-1;
  .chat-avatar {
    @apply row-span-2 self-end;
  }
  .chat-header {
    @apply row-start-1 mb-1 text-xs;
  }
  .chat-footer {
    @apply row-start-3 mt-1 text-xs;
  }
  .chat-bubble {
    @apply rounded-box relative block w-fit p-3;
    max-width: 90%;
    min-height: 2.75rem;
    min-width: 2.75rem;
    &:before {
      @apply absolute bottom-0 size-4;
      background-color: inherit;
      content: "";
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
    }
  }
  &.chat-receiver {
    @apply place-items-start;
    grid-template-columns: auto 1fr;
    .chat-header {
      @apply col-start-2;
    }
    .chat-footer {
      @apply col-start-2;
    }
    .chat-avatar {
      @apply col-start-1;
    }
    .chat-bubble {
      @apply bg-base-100 text-base-content col-start-2 rounded-es-none;
      &:before {
        inset-inline-start: -0.749rem;
        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
      }
      [dir="rtl"] &:before {
        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
      }
    }
  }
  &.chat-sender {
    @apply place-items-end;
    grid-template-columns: 1fr auto;
    .chat-header {
      @apply col-start-1;
    }
    .chat-footer {
      @apply col-start-1;
    }
    .chat-avatar {
      @apply col-start-2;
    }
    .chat-bubble {
      @apply bg-primary text-primary-content col-start-1 rounded-ee-none text-end;
      &:before {
        inset-inline-start: 99.9%;
        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e");
      }
      [dir="rtl"] &:before {
        mask-image: url("data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e");
      }
    }
  }
}
